<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/img/asset-favicon.ico">
    <title>计算机导论精品课程在线教育网</title>

    <link rel="stylesheet" href="/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="/css/page-learing-index.css"/>
    <link rel="stylesheet" href="/css/page-header.css"/>
    <style>


        ul, ol, li, dl, dd {
            margin: 0;
            padding: 0
        }


        .mod-nav__side-list {
            width: 400px
        }

        .mod-nav__side-li {
            padding: 0px 0 12px
        }

        .mod-nav__link-nav-second {
            display: inline-block;
            vertical-align: middle;
            font-weight: 700;
            vertical-align: top;
            width: 110px;
            text-align: left
        }

        .mod-nav__link-nav-second .mod-nav__link-nav-second-link {
            color: #333
        }

        .mod-nav__link-nav-second .mod-nav__link-nav-second-link:hover {
            text-decoration: underline
        }

        .mod-nav__wrap-nav-third {
            display: inline-block;
            vertical-align: middle;
            /*width: 355px;*/
            vertical-align: top;
            *vertical-align: top;
            _vertical-align: top
        }

        .mod-nav__link-nav-third {
            display: inline-block;
            vertical-align: middle;
            color: #333;
            margin-right: 20px;
            text-align: left;
            vertical-align: top;
            margin-bottom: 3px
        }

        .mod-nav__link-nav-third:hover {
            text-decoration: underline
        }

        .my-class-box > .m-slideTop-personFunc {
            color: black;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-size: 16px;

        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 330px;
            border-radius: 0px;
            position: relative;
            clear: none;
            display: block;
            color: black;
            margin: 0px;
            padding: 0px;
            font-size: 16px;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .u-person-word > span {
            line-height: 16px;
            display: inline-block;
            width: 100%;
            font-family: 微软雅黑, "Microsoft YaHei";
            font-size: 12px;
            color: #666666;
            text-align: center;
            vertical-align: top;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .u-person-title > span {
            padding-top: 10px;
            line-height: 22px;
            display: inline-block;
            width: 100%;
            font-family: 微软雅黑, "Microsoft YaHei";
            font-size: 16px;
            color: #333333;
            text-align: center;
            vertical-align: middle;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .navLoginBtn.u-person-login > .m-index-person-loginBtn {
            line-height: 36px;
            display: inline-block;
            width: 100%;
            font-family: 微软雅黑, "Microsoft YaHei";
            font-size: 16px;
            color: white;
            text-align: center;
            vertical-align: top;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .navLoginBtn.u-person-login {
            left: 20px;
            top: 250px;
            width: 160px;
            height: 36px;
            border-radius: 0px;
            position: absolute;
            clear: none;
            font-size: 16px;
            display: block;
            color: black;
            background-color: #00a4ff;
            border: solid 1px #00a4ff;
            margin: 0px;
            padding: 0px;
            line-height: 36px;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .navLoginBtn.u-person-login a {
            display: block;
            line-height: 35px;
        }

        .m-slideTop-personFunc > .m-slideTop-personFunc-f > .u-person-container > .u-person-word {
            left: 28px;
            top: 280px;
            width: 144px;
            height: 16px;
            border-radius: 0px;
            position: absolute;
            clear: none;
            font-size: 16px;
            display: block;
            color: black;
            margin: 0px;
            padding: 0px;
            line-height: 16px;
        }
    </style>
</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<#-- 页面头部 &ndash;&gt;-->
<#include virtual="/include/header.html">
<!--页面头部结束-->
<!--banner区-->
<!--<div class="travel-index-imgroll">-->
<!--<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
<!--<ol class="carousel-indicators">-->
<!--<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
<!--<li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
<!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
<!--</ol>-->
<!--<div class="carousel-inner" role="listbox">-->
<!--<div class="item active">-->
<!--<img src="banner3.png" width="100%" alt="AA"> -->
<!--</div>-->
<!--<div class="item">-->
<!--<img src="bannerA.jpg" width="100%" alt="AA">-->
<!--</div>-->
<!--<div class="item">-->
<!--<img src="bannerB.jpg" width="100%" alt=""> -->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--轮播图-->
<!--#include virtual="/include/index_banner.html"-->
<!--轮播图结束-->
<div class="container">

    <div class="my-class-box">
        <div class="m-slideTop-personFunc">
            <div class="m-slideTop-personFunc-f">
                <div class="u-person-container">
                    <div class="u-person-title"><span>学习导论精品课程</span></div>
                    <div class="title">我的课程表</div>
                    <div class="courselist">
                        <a href="#">
                            <p>>Scala程序设计语言</p>
                        </a>
                    </div>
                    <div class="courselist">
                        <a href="#"><p>>C++程序设计语言</p></a>
                    </div>
                    <div class="courselist">
                        <a href="#"><p>>Java程序设计语言</p></a>
                    </div>
                    <div class="navLoginBtn u-person-login">
                        <a href="#"> <span class="m-index-person-loginBtn">我的课程</span></a>
                    </div>
                    <!--<div class="u-person-word"><span>黑马程序员出品</span></div>-->
                </div>
            </div>
        </div>
    </div>


    <div class="recommend-list">
        <div class="btn-group btn-group-justified">

        </div>
    </div>
    <div class="conten-list">
        <div class="Recommend">
            <div class="title">精品推荐<a href="#" class="queryall">查看全部</a></div>
            <div class="content">
                <#list model as perfectCourseItem>
                    <#list perfectCourseItem.mapValue.children as hashValue>
                        <div class="recom-item">
                            <a href="#">
                                <p>
                                    <a href="http://ucenter.computercourse.com/#/learning/297e7c7c62b8aa9d0162b8ab56ba0001/0"><img
                                                src="img/widget-demo1.png" width="100%" alt=""></a><span
                                            class="lab">HOT</span></p>
                                <ul>
                                    <li>${hashValue.name}</li>
                                    <li><span>${hashValue.grade}</span> <em> · </em> ${hashValue.member}人在学习
                                    </li>
                                </ul>
                            </a>
                        </div>
                    </#list>
                </#list>
            </div>
        </div>

        <div class="course-box">
            <div class="title">
                Java工程师
                <div class="course-nav">
                    <!--<span class="active">热门</span>-->
                    <span><a href="#">基础课程</a></span>
                    <span><a href="#">就业课程</a></span>
                    <span><a href="#">高级课程</a></span>
                </div>
                <a class="queryall" href="#">查看全部</a>
            </div>
            <div class="content">
                <div class="cont-left">
                    <img src="img/widget-ind-left.png" width="100%" alt="">
                </div>
                <div class="cont-right">
                    <div><img src="img/widget-ind-top.png" width="100%" alt=""></div>
                    <#list model as perfectCourseItem2>
                        <#list perfectCourseItem2.mapValue.children2 as hashValue2>
                            <div class="recom-item">
                                <a href="#">
                                    <p>
                                        <a href="http://ucenter.computercourse.com/#/learning/297e7c7c62b8aa9d0162b8ab56ba0001/0"><img
                                                    src="img/widget-demo1.png" width="100%" alt=""></a><span
                                                class="lab">HOT</span></p>
                                    <ul>
                                        <li>${hashValue2.name}</li>
                                        <li><span>${hashValue2.grade}</span> <em> · </em> ${hashValue2.member}
                                            人在学习
                                        </li>
                                    </ul>
                                </a>
                            </div>
                        </#list>
                    </#list>
                </div>
            </div>
        </div>

        <div class="course-box">
            <div class="title">
                PHP工程师
                <div class="course-nav">
                    <!--<span class="active">热门</span>-->
                    <span><a href="#">基础课程</a></span>
                    <span><a href="#">就业课程</a></span>
                    <span><a href="#">高级课程</a></span>
                </div>
                <a class="queryall" href="#">查看全部</a>
            </div>
            <div class="content">
                <div class="cont-left">
                    <img src="img/widget-ind-left1.png" width="100%" alt="">
                </div>
                <div class="cont-right">
                    <div><img src="img/widget-ind-top1.png" width="100%" alt=""></div>
                    <#list model as perfectCourseItem3>
                        <#list perfectCourseItem3.mapValue.children2 as hashValue3>
                            <div class="recom-item">
                                <a href="#">
                                    <p>
                                        <a href="http://ucenter.computercourse.com/#/learning/297e7c7c62b8aa9d0162b8ab56ba0001/0"><img
                                                    src="img/widget-demo1.png" width="100%" alt=""></a><span
                                                class="lab">HOT</span></p>
                                    <ul>
                                        <li>${hashValue3.name}</li>
                                        <li><span>${hashValue3.grade}</span> <em> · </em> ${hashValue3.member}人在学习</li>
                                    </ul>
                                </a>
                            </div>
                        </#list>
                    </#list>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="container">
        <div class="teacher-list text-center">
            <div class="title"> 名师大咖
                <a class="queryall" href="#">申请加入</a>
            </div>
            <div class="first-box">
                <div class="teach-item">
                    <a href="#">
                        <img src="img/teacherpic.jpg" width="230px" height="230px" alt="">
                        <span class="lab">28555学习过</span>
                        <ul class="teach-info">
                            <li>张老师 <span>Java EE</span></li>
                        </ul>
                    </a>
                </div>
                <div class="teach-item">
                    <a href="#">
                        <img src="img/teacherpic.jpg" width="230px" height="230px" alt="">
                        <span class="lab">28555学习过</span>
                        <ul class="teach-info">
                            <li>王老师 <span>Java EE</span></li>
                        </ul>
                    </a>
                </div>
                <div class="teach-item">
                    <a href="#">
                        <img src="img/teacherpic.jpg" width="230px" height="230px" alt="">
                        <span class="lab">28555学习过</span>
                        <ul class="teach-info">
                            <li>李老师 <span>Java EE</span></li>
                        </ul>
                    </a>
                </div>
                <div class="teach-item">
                    <a href="#">
                        <img src="img/teacherpic.jpg" width="230px" height="230px" alt="">
                        <span class="lab">28555学习过</span>
                        <ul class="teach-info">
                            <li>黄老师 <span>Java EE教学经验丰富</span></li>
                        </ul>
                    </a>
                </div>
                <div class="teach-item">
                    <a href="#">
                        <img src="img/teacherpic.jpg" width="230px" height="230px" alt="">
                        <span class="lab">28555学习过</span>
                        <ul class="teach-info">
                            <li>罗老师 <span>Java EE</span></li>
                        </ul>
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>

        </div>
    </div>
    <!-- 页面底部 -->
    <div class="gotop">
        <a href="#"><i class="glyphicon glyphicon-pencil"></i><span class="hide">问题反馈</span></a>
        <a href="#top"><i class="glyphicon glyphicon-plane"></i><span class="hide">返回顶部</span></a>
    </div>


    <script type="text/javascript" src="plugins/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="plugins/bootstrap/dist/js/bootstrap.js"></script>
    <script type="text/javascript">
        var tg = $('.banner-item .item');
        var num = 0;
        for (i = 0; i < tg.length; i++) {
            $('.indicators').append('<span></span>');
            $('.indicators').find('span').eq(num).addClass('active');
        }

        function roll() {
            tg.eq(num).animate({
                'opacity': '1',
                'z-index': num
            }, 1000).siblings().animate({
                'opacity': '0',
                'z-index': 0
            }, 1000);
            $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
            if (num >= tg.length - 1) {
                num = 0;
            } else {
                num++;
            }
        }

        $('.indicators').find('span').click(function () {
            num = $(this).index();
            roll();
        });
        var timer = setInterval(roll, 3000);
        $('.banner-item').mouseover(function () {
            clearInterval(timer)
        });
        $('.banner-item').mouseout(function () {
            timer = setInterval(roll, 3000)
        });
    </script>
    <script type="text/javascript" src="js/widget-travel-index-nav.js"></script>
    <script>
        /*$('.teach-item').hover(function() {
            $(this).find('.teach-info').animate({
                'height': '100%'
            }, 500);
        }, function() {
            $(this).find('.teach-info').animate({
                'height': '112px'
            }, 500);
        })*/


        $('.gotop a').hover(function () {
            $(this).find('span').removeClass('hide')
        }, function () {
            $(this).find('span').addClass('hide')
        })


        $(function () {
            $('.interest-box .interest-cont li').click(function () {
                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }
            })
            $('.mask').click(function () {
                $('.interest-box').hide();
            })
            $('.button .pres').click(function () {
                $('.interest-box').hide();
            })
            $('.button .skip').click(function () {
                $('.interest-box').hide();
            })
        })
    </script>
    <script src="js/page-learing-index.js"></script>
</body>
</html>